<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>翻版记忆游戏</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
h3{
    margin-left: 40px;
}
.center{
    text-align: center;
}
.area,.sub-row{
    float:left;
    margin:.5rem auto;
}
.area{
    width:100%;
}
.sub-row{
    width:100%;
}
.td{
    float:left;
    width:50px;
    height:50px;
    background: #eee;
    text-align: center; 
    line-height: 50px;
    border:1px solid #ddd;
}
.start{
    padding:.3rem .8rem;
    /* border-radius: .2rem; */
}
</style>
</head>
    <body>
        <h3 class="center">找到相同的两张牌</h3>
        <div class="area">

        </div>
        <div class="sub-row">
            <p></p>
            用时：<input type="text" readonly="true" class="time"/><br>
            得分：<input type="text" readonly class="fen"/><br>
            步数：<input type="text" readonly class="step" value="0"/><br/>
            历史最少步数：<span class="top-step"></span><br/>
            历史最少时间：<span class="top-time"></span><br/>
            <button class="start">开 始</button>
        </div>
    </body>
</html>

<script>

//画表格
function create(row){
    var area=document.querySelector(".area");
    area.innerHTML="";
    var item="<div class='td'></div>";
    var len=row*row;
    var str="";
    for(var i=0;i<len;i++){
         str+=item;
    }
    area.innerHTML=str;
    data.tds=$(".td");//
    data.max=row%2==0?(row*row):(row*row-1);

    var width=document.body.clientWidth;
    var item_width=(Math.floor(width/row)-2)+"px";
    for(var i=0,len=data.tds.length;i<len;i++){
        data.tds[i].style.width=item_width;
        data.tds[i].style.height=item_width;
        data.tds[i].style.lineHeight=item_width;
    }
    console.log('width',document.body.clientWidth)
}
//生成随机数
function rand(min,max){
    return Math.round(Math.random()*(max-min)+min);
}
function $(el){
    return document.querySelectorAll(el);
}
//填充内容
function fill(row){
    var len=row*row/2;
    var all=[];
    for(var i=0;i<len;i++){
        all.push(i+1);
        all.push(i+1);
    }
    var re=[];
    while(all.length>0){
        var i=rand(0,all.length-1);
        re.push({
            text:all[i],
            open:0,
        });
        all.splice(i,1);
    }
    data.all=re;//
}

//点击判断
function bind(){
    var tds=data.tds;
    var len=tds.length;
    for(let i=0;i<len;i++){
        tds[i].addEventListener("click",()=>{
            play(i);
        })
    }
}
function play(i){
    if(data.finish||data.all[i].open==1||i==data.prev){
        return;
    }
    document.querySelector(".step").value=parseInt(document.querySelector(".step").value)+1;
    data.tds[i].innerHTML=data.all[i].text;
    data.tds[i].style.background="yellow";
    if(data.prev==-1){
        data.prev=i;
        return;
    }
    if(data.all[i].text==data.all[data.prev].text){
        data.all[i].open=1;
        data.tds[i].style.background="#eee";
        data.all[data.prev].open=1;
        data.tds[data.prev].style.background="#eee";
        data.prev=-1;
    }else{
        data.tds[data.prev].innerHTML="";
        data.tds[data.prev].style.background="#eee";
        data.prev=i;
    }
    count();
}

//判断成绩
function count(){
   var total=0;
   for(var i=0,len=data.all.length;i<len;i++){
       if(data.all[i].open==1){
           total++;
       }
   }
   document.querySelector(".fen").value=total;
   document.querySelector(".time").value=(new Date().getTime()-data.start)/1000;
   console.log("len",total,data.max);
   if(total>=data.max){
       data.finish=true;
       _top("step",$(".step")[0].value);//保存最好成绩
       _top("time",$(".time")[0].value);
       setTimeout(()=>{
           alert("恭喜过关");
       })
   }
}

function start(){
    data={
        row:config.row,
        all:[],
        prev:-1,//上一次点击的索引
        tds:[],
        finish:false,//是否结束
        start:new Date().getTime(),//开始时间
        max:0,
    }
    create(data.row);
    fill(data.row);
    bind();
    $(".top-step")[0].innerHTML=_top("step");
    $(".top-time")[0].innerHTML=_top("time");
}

function _top(key,num){
    var old=localStorage.getItem(key);
    old=old&&old!="undefined"?old:0;
    if(old==0||parseInt(num)<parseInt(old)){
        localStorage.setItem(key,num);
    }
    if(!num){
        return old;
    }
}


var config={
    row:5,
}
//全局的data
var data={
}
document.querySelector(".start").onclick=start;

start();



            
</script>